<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--device first-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>文件管理</title>
	<link href="/res/third/bootstrap3/css/bootstrap.min.css"
		  rel="stylesheet">
<link href="/res/css/common/aztHead.css" rel="stylesheet">
<link href="/res/css/common/aztFile.css" rel="stylesheet">
<link rel="stylesheet" href="/res/third/webupload/css/webuploader.css" type="text/css"/>
<style type="text/css">
.ui-dialog-body{padding:0px;}    
/* background: #f1f1f1; */
.pagination>li>a, .pagination>li>span{line-height: 1;}
</style>
</head>
<body style="min-width: 1190px;">
	<!--头部、左侧菜单 -->
	<header>
		<div class="container-fluid  topNav"
			style="top: 0px;height:45px;background:#999;">
			<!-- <div class="col-xs-2 topLink" style="width: 125px;">
				<img src="/res\image\respective\bussiness\a_03.png">
			</div> -->
			<div class="col-xs-2 filetop" [#if initType?? && initType = 'image']style="background:#666"[#else]style="display:none;"[/#if] onclick = "changeTab('image')">
				<a>图片管理</a>
			</div>
			<div class="col-xs-2 filetop" [#if initType?? && initType = 'file']style="background:#666"[#else]style="display:none;"[/#if] onclick = "changeTab('file')">
				<a>文件管理</a>
			</div>
		</div>
	</header>

	<div class="fileContent" style="width: 750px;background: #f1f1f1;">
		<div class="row" style="height: 40px;margin: 0 10px;background: white;">
			<div class="col-xs-2" style="position: relative;height: 100%;width: 130px;">
				<i class="icon photo"
					style="background: url(/res/images/file/fileSum.png) no-repeat -35px -90px;"></i>
					<h2 class="minePic">我的[#if initType?? && initType = 'image']图片[/#if][#if initType?? && initType = 'file']文件[/#if]</h2>
<!-- 				<h2 class="form-control myPic">我的图片 </h2> -->
			</div>
			<div class="col-xs-6" style="line-height: 20px;">
				<div class="col-xs-4 opPicButt">
					<button class="upPicBu"
						style="color: #bd4a1d; position: relative; border: 1px solid #f8ba01;" >
						<span class="upFileIcon"
							style="background: url(/res/images/file/fileSum.png) no-repeat -24px -131px;"></span>上传[#if initType?? && initType = 'image']图片[/#if][#if initType?? && initType = 'file']文件[/#if]
					</button>
					<div id="picker" style="display: none"></div>
				</div>
				<div class="col-xs-4 opPicButt" style="padding: 0px;">
					<button class="backNoneBu">
						<span class="upFileIcon"
							style="background: url(/res/images/file/fileSum.png) no-repeat -4px -131px;">
						</span>
						<span style="color: black;">新建文件夹</span>
					</button>
				</div>
				<div class="col-xs-4 opPicButt">
					<button class="backNoneBu">
						<span class="upFileIcon"
							style="background: url(/res/images/file/fileSum.png) no-repeat -44px -131px;"></span>回收站
					</button>

				</div>
			</div>
			<div class="col-xs-3" style="position: relative;margin-top: 8px;">
				<input placeholder="按文件/图片名称搜索" class="form-control" style="height:24px;width: 190px;" /><span
					class="upFileIcon"
					style="position:absolute;background: url(/res/images/file/fileSum.png) no-repeat -83px -130px; top: 3px; right: 3px;"></span>
			</div>
			<div class="col-xs-1" style="margin-top: 10px;padding: 0px;">
				<a>高级搜索</a>
			</div>
		</div>
		<div class="row"
			style="background: #f6feef; border-top: 1px solid #b1e591;border-bottom: 1px solid #b1e591;margin: 0 10px;height: 30px;line-height: 30px;">
			<div class="col-xs-6">
				<input type="checkbox" style="margin-right: 15px;">全选
				<span class="dealPic" style="background: url(/res/images/file/fileSum.png) no-repeat 0px -545px;top: 3px;position: relative;"></span>
				<a href="javascript:void(0);" style="margin-right:5px">重命名</a>
				<span style="color: #d3d8ce;">|</span>
				<span class="dealPic" style="background: url(/res/images/file/fileSum.png) no-repeat -190px -540px;"></span>
				<a href="javascript:void(0);" id="del">删除</a>
			</div>

			<div class="col-xs-2">
			</div>
			<div class="col-xs-2">
			</div>
		</div>
		<div class="row picArea">
			<div class="row" style="margin-top: 15px;">
                [#if pagination ?? && pagination.list??]
                    [#list pagination.list as file]
                        [#if file_index > 0 && file_index % 6 == 0 ]
                            </div>
                            <div class="row" style="margin-top: 15px;">
                        [/#if]
                        <div class="col-xs-2" id="file_${file_index}" url="${file.url!}" fid="${file.id!}" fname = "${file.fileName!}">
                            <div class="imgCont">
                                <img alt="" src="[#if initType?? && initType = 'image']${file.url!}[/#if][#if initType?? && initType = 'file']/res/images/common/fileImg.png[/#if]" width="100%" height="100%">
                            </div>
                            <div class="picIntro">
                                <dfn title="${file.fileName!}">[@content_cut content=file.fileName! len=8 ending="..." /]</dfn>
                            </div>
                        </div>
                    [/#list]
                [/#if]
			</div>
		</div>

        [#if pagination??]
            <nav style="text-align: center; margin:2px 10px; background: white;height: 35px;">
                <ul class="fenye" style="margin-top: 4.5px;">
                    <li><a href="javascript:void(0);" [#if pagination.pageNo != 1]onclick="fileFenYeGo(1);"[/#if]>首页</a></li>
                    <li><a href="javascript:void(0);" [#if pagination.pageNo != pagination.prePage]onclick="fileFenYeGo(${pagination.prePage!});"[/#if]>&laquo;上一页</a></li>
                    <li><a>${pagination.pageNo!}/${pagination.totalPage}</a></li>
                    <li><a href="javascript:void(0);" [#if pagination.pageNo != pagination.nextPage]onclick="fileFenYeGo(${pagination.nextPage!});"[/#if]>下一页&raquo;</a></li>
                    <li><a href="javascript:void(0);" [#if pagination.pageNo != pagination.totalPage]onclick="fileFenYeGo(${pagination.totalPage!});"[/#if]>尾页</a></li>
                </ul>
            </nav>
        [/#if]
		<div class="row" style="text-align: center;margin: 10px;">
			<button class="confirmButt" type="button" id="fileManagerSure">确认</button>
			<button class="cancleButt" type="button" id="fileManagerCancel">取消</button>
		</div>
	</div>
</body>
<script type="text/javascript" src="/res/third/webupload/js/webuploader.js"></script>
<script type="text/javascript">
	 $(function(){

//	     $(".imgCont img").each(function(i){
//             Get on screen image
//             var screenImage = $(this);

//             Create new offscreen image to test
//             var theImage = new Image();
//             theImage.src = screenImage.attr("src");

//              Get accurate measurements from that.
//             var imageWidth = theImage.width;
//             var imageHeight = theImage.height;

//	        if(parseInt($(this).height()) < parseInt( $(this).width())) {
//	            $(this).css({"width" : "100%" , "height" : "auto"});
//            }else {
//                 $(this).css({"height" : "100%" , "width" : "auto"});
//            }
//         });

//		 var fileOptions;

		 $(".picArea .col-xs-2").click(function(){
			 $(".picArea").css({"border" : "none"});
			 $(this).toggleClass("choised");
			 $(this).children(".imgCont").toggleClass("picChoose");
			 $(this).children(".picIntro").toggleClass("picChooseIntr");
			 var $this = $(this);
		     [#if !multiple]
			 	$(".picArea .col-xs-2").each(function(){
			 		if($(this).attr("id") != $this.attr("id")){
						$(this).removeClass("choised");
						 $(this).children(".imgCont").removeClass("picChoose");
						 $(this).children(".picIntro").removeClass("picChooseIntr");
					}
				});
             [/#if]
		 });

         $("#fileManagerCancel").click(function(){
             fileOptions.cancel();
         });
         $("#fileManagerSure").click(function(){
         	var choised = $(".picArea .choised").length;
			 if(choised == 0){
				 $(".picArea").css({"border" : "2px solid red"});
			 }else{
				 var files = [];
				 $(".picArea .choised").each(function(){
				 	var file = {};
				 	file.url = $(this).attr("url");
					 file.name = $(this).attr("fname");
				 	files.push(file);
				 });
//                 layer.close(fileDialog);
             	fileOptions.callback(files);
             	fileOptions.close();
			 }
         });

         $("#del").click(function(){
         	var choised = $(".picArea .choised").length;
			 if(choised == 0){
				 $(".picArea").css({"border" : "2px solid red"});
			 }else{
				 var fids = [];
				 $(".picArea .choised").each(function(){
				 	if($(this).attr("fid") != ''){
				 		fids.push($(this).attr("fid"));
					}
				 });
				 if(fids.length > 0){
					 var sure = confirm("是否确认删除文件？");
					 if(sure){
						 $.ajax({
							 url : '/user/delFile',
							 type : 'post',
							 data : {fids:fids.join(",")},
							 success : function () {
                                 fileOptions.loading();
							 }
						 });
					 }
				 }else{
				 	alert("临时文件，不能删除");
					 return false;
				 }

			 }
         });



         var uploader = WebUploader.create({

             // swf文件路径
             swf: '/res/third/webupload/swf/Uploader.swf',

             // 文件接收服务端。
             server: '/res/third/ueditor/jsp/controller.jsp?action=uploadfile[#if userpath?? ]&userpath=${userpath!}[/#if]',

             // 选择文件的按钮。可选。
             // 内部根据当前运行是创建，可能是input元素，也可能是flash.
             pick: '#picker',

			 // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
			 resize: false,
             compress: false

			 //auto : true,

//             [#if initType?? && initType == 'image']
//			  只允许选择图片文件。
//                accept: {
//                    title: 'Images',
//                    extensions: 'gif,jpg,jpeg,bmp,png',
//                    mimeTypes: 'image/*'
//                }
// 		    [/#if]




         });

		 uploader.on( 'uploadSuccess', function( file , response) {
			 if(response.state != "SUCCESS"){
			 	alert(response.state)
			 }else{
			 	var file = {};
			 	file.fileName = response.originalName;
				 file.url = response.url;
				 file.suffix = response.type.substring(1);
                 file.isImage = fileOptions.initType == 'image' ? 1 : 0;
				 $.ajax({
				 	url : '/user/saveFile',
					 type : 'post' ,
					 data : file,
					 success : function(){
                         fileOptions.loading();
					 }
				 });
			 }
		 });

		 uploader.on( 'startUpload', function() {
             layer.load(2);
		 });

		 // 当有文件添加进来的时候
		 uploader.on( 'fileQueued', function( file ) {
			var fileTypes = "doc,docx,xls,xlsx,ppt,pptx,zip,rar";
			var imageTypes = "gif,jpg,jpeg,bmp,png";
			var flag = false;
			var alertMsg = "不允许的文件类型！";
			 [#if initType?? && initType == 'image']
			 	if(imageTypes.indexOf(file.ext) < 0){
					flag = true;
					alertMsg += "允许类型：("+imageTypes+")";
				}
			 [#else]
				 if(fileTypes.indexOf(file.ext) < 0){
					 flag = true;
					 alertMsg += "允许类型：("+fileTypes+")";
				 }
			 [/#if]

			 if(flag){
			 	alert(alertMsg);
				 return false;
			 }else{
				 uploader.upload();
			 }

		 });

		 $(".upPicBu").on('click' , function(){
		 	$("#picker label").click();
		 });

     });

    function changeTab(type){
        fileOptions.initType = type;
        fileOptions.loading();
        return false;
    }

    function fileFenYeGo(pageNo){
        fileOptions.pageNo = pageNo;
        fileOptions.loading();
        return false;
    }

</script>
</html>